﻿<!DOCTYPE html>
<html>
<head>
    <title>吴淞学区红色电影征文活动</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="asset/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="asset/css/main.css" />
    <script type="text/javascript">
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    </script>
</head>
<body>
    <section class="wrapper">
        <div id="main_index" class="main"></div>
        <div id="main_vote" class="main hidden">
            <ul class="tab_title">
                <li class="active">WORD文档</li>
                <li>数字故事</li>
            </ul>
            <div class="tab_content" style="padding-bottom: 60px;">
                    
                    <!-- <div id="message">ok-1</div> -->
                    <div id="list_words" class="waterfall">
                    </div>


                    <div id="list_videos" class="waterfall hidden">
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/1.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/2.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/1.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/1.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/2.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/1.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/1.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/2.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="item-content">
                                <img src="asset/images/1.jpg" class="item-cover" />

                            </div>
                            <div class="item-bar">
                                <span class="thumbup_total">1 票</span>
                                <span class="thumbup_btn" data_articleid="45b8da8c-a7ba-457e-a375-94a2a7648371">投票</span>
                            </div>
                        </div>
                    </div>

            </div>
        </div>
        <div id="main_rule" class="main hidden">
            <p id="rule_title">活动规则 </p>
            <ul id="list_rules">
                <li><p>1. 在活动期内每个微信用户总共可以投3票。</p></li>
                <li><p>2. 每个微信用户可以为一篇投稿投多票。</p></li>
            </ul>
        </div>
    </section>
    <div id="nav_main">
        <div class="left"><span href="index.html" class="nav_item" id="a_index"></span></div>
        <div class="left" style="width:calc(100% - 120px);"><span class="nav_item" id="a_vote"></span></div>
        <div class="right"><span class="nav_item" id="a_rule"></span></div>
    </div>

    <script id="list" type="text/html">
        {{each articles item index}}
        <div class="item">
            <div class="item-content">
                <a href="1.html"><img src="asset/images/1.jpg" class="item-cover" /></a>

            </div>

            <div class="item-bar">
                <span class="thumbup_total" data_total="{{item.ThumbupCount}}">{{item.ThumbupCount}} 票</span>
                <span class="thumbup_btn" data_articleid="{{item.ArticleID}}">投票</span>
            </div>
        </div>
        {{/each}}
    </script>

    <script src="asset/js/template-web.js"></script>
    <script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js" type="text/javascript"></script>
    <script src="asset/js/selector.js" type="text/javascript"></script>
    <script src="asset/js/utils.js" type="text/javascript"></script>
    <script type="text/javascript">
        var user;
        var openId;
        var nickName;
        var headImgUrl;

        $(document).ready(function () {

            initPage();


            $("#a_rule").click(function () {
                resetNavStatus();
                resetContentStatus("rule");
                $(this).css("background-image", "url('asset/images/btn_rule_focus.png')");
            });

            $("#a_index").click(function () {
                resetNavStatus();
                resetContentStatus("index");
                $(this).css("background-image", "url('asset/images/btn_index_focus.png')");
            });

            $("#a_vote").click(function () {
                resetNavStatus();
                resetContentStatus("vote");
                $(this).css("background-image", "url('asset/images/btn_vote_focus.png')");
            });

            $(".tab_title li").click(function () {
                $(".tab_title li").removeClass("active");
                $(this).addClass("active");

                var index = $(".tab_title li").index(this);
                $(".waterfall").hide();
                $(".waterfall:eq(" + index + ")").show();
            });

        });

        function resetNavStatus() {
            $("#a_index").css("background-image", "url('asset/images/btn_index.png')");
            $("#a_vote").css("background-image", "url('asset/images/btn_vote.png')");
            $("#a_rule").css("background-image", "url('asset/images/btn_rule.png')");
        }

        function resetContentStatus(id) {
            $(".main").hide();
            $("#main_" + id).show();
        }

        function initPage() {
            //第一步检查cookie是否存在，如果存在就不用去访问微信服务器获取openid，直接使用cookies中的openid查询数据
            //库中的用户信息并写入cookie,如果不存在则访问微信服务器获取openid
            //第二步使用openid检查数据库中是否有该用户信息，如果数据库中没有，说明该用户是第一次登录，需要将用户信息
            //保存到数据库，然后取出用户信息并保存到cookie中；如果数据库中有，则取出用户信息保存到cookie中

            user = getCookie("wusong_user");

            if (user != null && user != "") {

                openId = JSON.parse(user).OpenID;
                nickName = JSON.parse(user).NickName;

                var userUrl = "api/user/" + openId;

                $.ajax({
                    url: userUrl,
                    dataType: 'application/json',
                    type: 'GET',
                    error: function (xhr, errorType, error) {

                        console.log(errorType + ":" + userUrl);

                    },
                    success: function (data) {
                        if (data != null && data != "") {
                            //用户已存在
                            console.log("user is existed.")
                            
                            setCookie("wusong_user", data, 60);
                            getArtilces();
                        }
                    }
                });

            }
            else {


                var code = GetQueryString("code");

                $.ajax({
                    url: "api/accesstoken/?code=" + code,
                    dataType: 'application/json',
                    type: 'GET',
                    error: function (data) {
                        console.log("fail from wechatapi : " + data.toString());

                    },
                    success: function (data) {
                        var userInfo = JSON.parse(data);
                        openId = userInfo.openid;
                        nickName = userInfo.nickname;
                        headImgUrl = userInfo.headimgurl;

                        console.log(openId);

                        $.ajax({
                            url: "api/user/" + openId,
                            dataType: 'application/json',
                            type: 'GET',
                            error: function (xhr, errorType, error) {
                                if (xhr.status == "404") {
                                    //用户不存在，将用户上传
                                    //$("#message").html("ok-2");
                                    uploadUser();
                                } else {
                                    console.log(errorType)
                                }
                            },
                            success: function (data) {
                                if (data != null && data != "") {
                                    //用户已存在
                                    console.log("user is existed.")
                                    console.log(JSON.parse(data).OpenID);
                                    //$("#message").html(status);
                                    setCookie("wusong_user", data, 60);
                                    getArtilces();
                                }
                            }
                        });
                    }
                });


            }

            

        }

        function getArtilces() {
            $.ajax({
                url: "api/article/",
                dataType: "application/json",
                type: 'GET',
                error: function (error) {
                    console.log(error);
                },
                success: function (result) {

                    var data = JSON.parse("{\"articles\":" + result + "}");
                    var html = template("list", data);
                    $("#list_words").html(html);
                },
                complete: function (data) {
                    console.log("getArticles completed.");
                    user = getCookie("wusong_user");

                    console.log(JSON.parse(user).ThumbupCount);
                    
                    //设置点赞按钮状态
                    if (JSON.parse(user).ThumbupCount >= 3) {
                        $(".thumbup_btn").css("background-color", "gray");
                    } else {
                        //绑定点赞动作
                        bindThumbupClick();
                    }
                }
            });
        }

        function bindThumbupClick() {
            $(".thumbup_btn").click(function () {

                var articleId = $(this).attr("data_articleId");
                
                var model = { "openid": openId, "nickname": nickName, "articleid": articleId };

                var span_thumbup_total = $(this).prev();

                $.ajax({
                    url: "api/thumbup/",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    data: JSON.stringify(model),
                    error: function (data) {
                        console.log(data);
                    },
                    success: function (data) {
                        console.log("ok");
                    },
                    complete: function () {
                        $.getJSON("api/article/" + articleId, function (data) {
                            span_thumbup_total.html(data.ThumbupCount + " 票");
                            //console.log(data.ThumbupCount);

                            $.getJSON("api/user/" + openId, function (data) {
                                setCookie("wusong_user", JSON.stringify(data), 60);
                                user = getCookie("wusong_user");
                                console.log(JSON.parse(user).ThumbupCount);

                                //设置点赞按钮状态
                                if (JSON.parse(user).ThumbupCount >= 3) {
                                    $(".thumbup_btn").css("background-color", "gray");
                                    $(".thumbup_btn").unbind("click");
                                }
                            });
                        });

                        
                    }
                });
            });
        }

        function uploadUser() {

            //$("#message").html("ok-3");

            var model = { "OpenID": openId, "NickName": nickName, "HeadImgUrl": headImgUrl };

            $.ajax({
                url: "api/user/",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                data: JSON.stringify(model),
                error: function (data) {
                    console.log(data);
                },
                success: function (data) {
                    console.log("uploadUser is ok");
                },
                complete: function (data) {
                    $.getJSON("api/user/" + openId, function (data) {
                        setCookie("wusong_user", JSON.stringify(data), 60);
                        getArtilces();
                    });
                }
            });
        }
    </script>
</body>
</html>